<template>
  <div class="recommend">
  	<yd-navbar class="recommend-navbar" height="0.8rem" bgcolor="#41CB47">
        <span slot="left" class="navbar-con">
            <span class="yadu-icon-weizhi"></span>{{weatherInfo.location.name}}
        </span>
        <span slot="right" class="more">
            <yd-icon name="more" size="0.53333rem"></yd-icon>
        </span>
    </yd-navbar>
    <div class="weatherModel">
    	<div class="temperature-con">
    		<div class="temperature">{{weatherInfo.now.temperature}}°C</div>
    		<div class="weather">{{weatherInfo.now.text}} 体感温度{{weatherInfo.now.feels_like}}°C</div>
    	</div>
    	<div class="air-con">
    		<div class="airInfo airQuality">
    			<span class="itemTitle"><i class="titleIcon yadu-icon-kongqizhiliang"></i>相对湿度</span>
    			<span class="itemCon">{{weatherInfo.now.humidity}}%</span>
    		</div>
    		<div class="airInfo PMNum">
    			<span class="itemTitle"><i class="titleIcon yadu-icon-wumai"></i>气压</span>
    			<span class="itemCon">{{weatherInfo.now.pressure}}mb</span>
    		</div>
    		<div class="airInfo windInfo">
    			<span class="itemTitle"><i class="titleIcon yadu-icon-feng"></i>{{weatherInfo.now.wind_direction}}风</span>
    			<span class="itemCon">{{weatherInfo.now.wind_scale}}级</span>
    		</div>
    		<div class="airInfo ultravioletRays">
    			<span class="itemTitle"><i class="titleIcon yadu-icon-taiyang"></i>能见度</span>
    			<span class="itemCon">{{weatherInfo.now.visibility}}km</span>
    		</div>
    	</div>
    </div>
    <yd-tab class="tabModel" height="0.98667rem" v-model="currentTab" :callback="fn" :prevent-default="false" font-size="0.37333rem" color="#bfbfbf" active-color="#41CB47" :item-click="itemClick">
        <yd-tab-panel :class="{'tab-con':true,'bgTab':currentTab==1}" v-for="item in tabs" :label="item.label">
        	<div class="itemList" v-show="currentTab==0">
		  		<div class="recommond-list-item" v-for="item,i in recommendList">
		  			<div class="img-title">
		  				<div class="title-img-model">
		  					<img class="title-img" :src="item.waterLogo">
		  				</div>
		  				<div class="title-con-model">
			  				<span class="title-text">{{item.waterName}}</span>
			  				<span class="title-description">{{item.waterDescription}}</span>
		  				</div>
		  				<div class="spreadBtn" @click="showCon(item,i)">{{item.showCon?'收起':'展开'}}</div>
		  			</div>
		  			<div class="recommend-item-con" v-if="item.showCon">
		  				<div class="recommend-text">
		  					{{item.waterContent}}
		  				</div>
		  			</div>
		  		</div>
		  	</div>
		  	<yd-infinitescroll :callback="getKnowledge" ref="scrollloading" v-show="currentTab==1">

		        <yd-list slot="list" theme="1" class="itemList knowledgeList">
		            <div class="knowledge-list-item" v-for="item in knowledgeList">
			  			<div class="item-title" @click="toDetail(item.id)">
			  				{{item.title}}
			  			</div>
			  			<yd-lightbox class="item-img" v-if="item.url&&item.url.length>0">
			  				<div class="imgwrap" v-for="img,key in item.url" :key="key">
			  					<yd-lightbox-img :src="img"></yd-lightbox-img>
			  				</div>
					    </yd-lightbox>
			  		</div>
		        </yd-list>

		        <!-- 数据全部加载完毕显示 -->
		        <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

		        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
		        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>

		    </yd-infinitescroll>
        	<!-- <div class="itemList knowledgeList" v-if="currentTab==1">
		  		<div class="knowledge-list-item" v-for="item in knowledgeList">
		  			<div class="item-title" @click="toDetail()">
		  				瞬间爆炸，为什么啊，真的是有点烦躁啊，唉唉唉唉
		  			</div>
		  			<yd-lightbox class="item-img" v-if="item.imgList&&item.imgList.length>0">
		  				<div class="imgwrap" v-for="img, key in item.imgList" :key="key">
		  					<yd-lightbox-img :src="img.src"></yd-lightbox-img>
		  				</div>
				    </yd-lightbox>
		  		</div>
		  	</div> -->
        </yd-tab-panel>
    </yd-tab>
  </div>
</template>

<script>
import URL from "@/until/urlConfig.js"
import until from "@/until/until.js"
export default {
  name: 'recommend',
  components: {
  },
  data(){
  	return{
  		currentTab:0,
  		tabs:[
  			{label:'个人推荐'},
  			{label:'健康知识'}
  		],
  		weatherInfo:{
  			now:{},
  			location:{},
  			weatherRecommend:[]
  		},
  		pageNumber:1,
  		pageSize:5,
  		allDown:false,
  		recommendList:[],
  		knowledgeList:[]
  	}
  },
  created(){
  	this.getWeatherInfo();
  },
  methods:{
  	itemClick(key){
  		this.currentTab = key;
  		if(key==1){
  			this.getKnowledge();
  		}
  	},
  	getKnowledge(){
  		until.$http.post(URL.getKnowledge,{pageNumber:this.pageNumber,pageSize:this.pageSize})
  		.then(res => {
  			const _list = res.data[0].hks;
  			const count = res.data[0].count||this.pageSize;
  			this.knowledgeList = [...this.knowledgeList, ..._list];;
  			if(this.pageNumber==Math.ceil(count/this.pageSize)){
  				this.$refs.scrollloading[1].$emit('ydui.infinitescroll.loadedDone');
  				return;
  			}
  			this.$refs.scrollloading[1].$emit('ydui.infinitescroll.finishLoad');
            this.pageNumber++;
  		})
  	},
  	fn(label, key) {
        // console.log(label, key);
    },
    showCon(item,i){
    	item.showCon=!item.showCon;
    	this.$set(this.recommendList,i,item);
    },
    getWeatherInfo(){
    	this.$http.get(URL.getWeatherInfo+'?location='+returnCitySN["cip"])
    	.then(res => {
    		this.weatherInfo = res.data&&res.data.length>0?JSON.parse(res.data[0]):{};
    		this.recommendList = this.weatherInfo.weatherRecommend.map((item,i) =>{
    			item.showCon = false;
    			return item;
    		});
    	})
    },
    toDetail(id){
    	this.$router.push({path:'/textdetail',query:{id:id}})
    },
    getIPs: function (callback) {
        var ip_dups = {};
        //compatibility for firefox and chrome
        var RTCPeerConnection = window.RTCPeerConnection
            || window.mozRTCPeerConnection
            || window.webkitRTCPeerConnection;
        //bypass naive webrtc blocking
        if (!RTCPeerConnection) {
            var iframe = document.createElement('iframe');
            //invalidate content script
            iframe.sandbox = 'allow-same-origin';
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            var win = iframe.contentWindow;
            window.RTCPeerConnection = win.RTCPeerConnection;
            window.mozRTCPeerConnection = win.mozRTCPeerConnection;
            window.webkitRTCPeerConnection = win.webkitRTCPeerConnection;
            RTCPeerConnection = window.RTCPeerConnection
                || window.mozRTCPeerConnection
                || window.webkitRTCPeerConnection;
        }
        //minimal requirements for data connection
        var mediaConstraints = {
            optional: [{RtpDataChannels: true}]
        };
        //firefox already has a default stun server in about:config
        //    media.peerconnection.default_iceservers =
        //    [{"url": "stun:stun.services.mozilla.com"}]
        var servers = undefined;
        //add same stun server for chrome
        if (window.webkitRTCPeerConnection)
            servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
        //construct a new RTCPeerConnection
        var pc = new RTCPeerConnection(servers, mediaConstraints);
        //listen for candidate events
        pc.onicecandidate = function (ice) {
            //skip non-candidate events
            if (ice.candidate) {
                //match just the IP address
                var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/
                var ip_addr = ip_regex.exec(ice.candidate.candidate)[1];
                //remove duplicates
                if (ip_dups[ip_addr] === undefined)
                    callback(ip_addr);
                ip_dups[ip_addr] = true;
            }
        };
        //create a bogus data channel
        pc.createDataChannel("");
        //create an offer sdp
        pc.createOffer(function (result) {
            //trigger the stun server request
            pc.setLocalDescription(result, function () {
            }, function () {
            });
        }, function () {
    	});
    }
  }
}
</script>
<style lang="scss">
@import "../style/public.scss";
.recommend{
	height:rem(166);
	height: 100%;
    background: #f1f1f1;
	.recommend-navbar{
		.yd-navbar-item{
			padding:0 rem(20);
		}
		.navbar-con{
			color:#fff;
			font-size:rem(30);
			.yadu-icon-weizhi{
				margin-right:rem(6);
			}
		}
		.more{
	      	transform:rotate(90deg);
	      	font-size:rem(26);
	      	color:#fff;
	    }
	}
	.weatherModel{
		background:$defaultcolor;
		.temperature-con{
			color:#fff;
			padding-bottom:rem(52);
			border-bottom:rem(2) solid #5dd362;
			height:rem(198);
			.temperature{
				font-size:rem(84);
			}
			.weather{
				font-size:rem(24);
			}
		}
		.air-con{
			display:flex;
			margin-top:rem(44);
			width:100%;
			height:rem(266);
			flex-wrap: wrap;
			padding-bottom:rem(28);
			.airInfo{
				width:50%;
				display:flex;
				flex-direction:column;
				.itemTitle{
					color:#b3ddb3;
					font-size:rem(24);
					margin-bottom:rem(10);
					.titleIcon{
						vertical-align:baseline;
						font-size:rem(28);
						margin-right:rem(8);
					}
				}
				.itemCon{
					color:#fff;
					font-size:rem(36);
				}
				&.airQuality,&.PMNum{
					margin-bottom:rem(32);
				}
			}
		}
	}
	.tabModel{
		height:calc(100% - 7.57333rem);
		.yd-tab-box{
			border-bottom:rem(2) solid #f1f1f1;
		}
		.yd-tab-panel{
			height:calc(100% - 1.01333rem);
		}
		.tab-con{
			&.bgTab{
				background:#fff;
			}
			height:100%;
			overflow: auto;
			.itemList{
				padding:rem(20) rem(20) 0;
				.recommond-list-item{
					margin-bottom:rem(20);
					.img-title{
						padding:rem(30) rem(38);
						box-shadow: 0 0 rem(20) 0 rgba(193,193,193,.5);
						border-radius:rem(18);
						background:#fff;
						display:flex;
						.title-img-model{
							margin-right:rem(26);
							align-items: center;
    						display: flex;
							.title-img{
								height:rem(86);
								width:rem(83);
							}
						}
						.title-con-model{
							display: flex;
							align-self: center;
							flex:1;
							flex-direction: column;
							text-align:left;
							width:calc(100% - 2.21333rem);
							.title-text{
								margin-bottom:rem(8);
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
								font-size:rem(32);
								color:#474747;
							}
							.title-description{
								font-size:rem(28);
								color:#a4a4a4;
							}
						}
						.spreadBtn{
							align-items: center;
    						display: flex;
    						color:#a4a4a4;
    						font-size:rem(28);
						}
					}
					.recommend-item-con{
						padding:0 rem(20);
						.recommend-text{
							box-shadow:rem(-8) 0 rem(20) rem(-14) rgba(0,0,0,.1),0 rem(8) rem(20) rem(-14) rgba(0,0,0,.1),0 rem(8) rem(20) rem(-8) rgba(0,0,0,.1) inset,rem(8) 0 rem(20) rem(-14) rgba(0,0,0,.1);
							padding:rem(20);
							background:#fff;
							text-align:left;
							color:#474747;
							font-size:rem(24);
						}
					}
				}
				.knowledge-list-item{
					margin-top:rem(20);
					border-bottom:rem(2) solid #f1f1f1;
					&:first-child{
						margin-top:0;
					}
					&:last-child{
						border:none;
					}
					.item-title{
						text-align:left;
						color:rgba(71,71,71,.7);
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						width:100%;
						font-size:rem(28);
						margin-bottom:rem(14);
					}
					.item-img{
						display:flex;
						width:100%;
						padding-bottom:rem(14);
						.imgwrap{
							margin-right:rem(3);
							height:rem(172);
							width:calc(33.33333% - 0.04rem);
							background:#000;
							font-size:0;
							overflow:hidden;
							&:last-child{
								margin-right:0;
							}
							img{
								height:100%;
							}
						}
					}
				}
			}
		}
		
	}
}
</style>
